<template>
	<view class="page_box">
		<!-- 搜索框 -->
		<view v-if="!flag_big" class="head_box">
			<u-search v-model="searchVal" margin="30rpx" placeholder="搜索商品" height="64" @search="onSearch"
				@custom="onSearch" @clear="clearSearch"></u-search>
		</view>
		<view :style="{display:flag_big?'flex':'block',padding:flag_big?'0 10px':'unset'}" v-else class="head_box">
			<view class="search-BIG-box">
				<image class="searchIcon" :src="$IMG_URL+'/static/images/BIG-icon/search.png'" mode=""></image>
				<input type="text" v-model="keyWord" placeholder="搜索商品"
					placeholder-style="color: #666666;font-size: 13px;">
				<image class="yuyinIcon" style="width: 13px;height: 17px;" :src="$IMG_URL+'/static/images/index_top/yuyin.png'"
					mode=""></image>
			</view>
			<view class="search-BIG-btn" @click="keyWordFun">
				搜索
			</view>
		</view>

		<view class="content_box">
			<!-- 搜索历史 -->
			<view class="search-history" v-if="historyTag.length">
				<view class="title-box u-flex u-row-between u-m-b-40">
					<view :style="{fontSize:flag_big?'20px':'16px',color:flag_big?'#000':'#333'}" class="title">搜索历史
					</view>
					<button :class="{BIGdel:flag_big}" class="u-reset-button clear-history-btn"
						@tap="showModal = true">清除搜索历史</button>
				</view>
				<view class="content u-flex u-col-center u-row-left u-flex-wrap">
					<button :class="{BIGitemH:flag_big}" class="item u-reset-button u-m-b-20 u-m-r-20  u-ellipsis-1"
						@tap="onSearch(item)" v-for="(item, index) in historyTag" :key="index">{{ item }}</button>
				</view>
			</view>
		</view>

		<!-- modal -->
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#e9b461"
			cancel-color="#666666" @confirm="clearSearchHistory" confirm-text="清除" cancel-text="取消"
			content="是否清除历史搜索记录？" title="提示"></u-modal>
		<view v-if="flag_big" class="yuyinBOX">
			<image :src="$IMG_URL+'/static/images/index_top/yuyin.png'" mode=""></image>
			<text>按住说话搜一搜</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {

		components: {

		},
		data() {
			return {
				searchVal: '',
				historyTag: [],
				showModal: false,
				keyWord: ''
			};
		},
		computed: {
			// 是否为大字版
			flag_big() {
				return this.$store.state.user.isBIG
			}
		},
		onShow() {
			this.historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) :
				[];
		},
		methods: {
			keyWordFun() {
				console.log(this.keyWord);
				if (this.keyWord !== '' && !this.historyTag.includes(this.keyWord)) {
					let searchHistoryArr = JSON.stringify(this.getArr(this.historyTag, this.keyWord));
					uni.setStorageSync('searchHistoryArr', searchHistoryArr);
					this.$Router.push(`/pages/goods/list?keywords=${this.keyWord}`);
					this.keyWord = '';
				} else {
					uni.showToast({
						title: '搜索内容不可为空',
						icon: 'none'
					})
				}
				
			},
			// 搜索
			onSearch(e) {
				if (e && !this.historyTag.includes(e)) {
					let searchHistoryArr = JSON.stringify(this.getArr(this.historyTag, e));
					uni.setStorageSync('searchHistoryArr', searchHistoryArr);
					this.$Router.push(`/pages/goods/list?keywords=${e}`);
					this.searchVal = '';
				} 

			},
			// 清除输入框
			clearSearch() {
				this.searchVal = '';
			},
			// 队列
			getArr(list, item) {
				let arr = list;
				let length = 10; //队列长度
				arr.length < length ? arr.unshift(item) : arr.pop();
				return arr;
			},
			// 清除历史记录
			clearSearchHistory() {
				this.historyTag = [];
				uni.removeStorageSync('searchHistoryArr');
			}
		}
	};
</script>

<style lang="scss">
	.head_box {
		.search-BIG-box {
			display: flex;
			flex: 1;
			height: 34px;
			background-color: #ffffff;
			border-radius: 17px;
			border: solid 2px #e5e5e5;
			align-items: center;
			padding: 0 15px;
			box-sizing: border-box;

			input {
				flex: 1;
			}

			.searchIcon {
				width: 16px;
				height: 16px;
				margin-right: 9px;
			}
		}

		.search-BIG-btn {
			height: 34px;
			background-image: linear-gradient(90deg,
					#ff8300 0%,
					#ff3d00 100%),
				linear-gradient(#ff4000,
					#ff4000);
			background-blend-mode: normal,
				normal;
			border-radius: 17px;
			padding: 11px 21px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			color: #fff;
			margin-left: 5px;
		}
	}

	.BIGitemH {
		height: 36px !important;
		display: flex;
		align-items: center;
		font-size: 16px !important;
		padding: 10px 30px !important;
		border-radius: 18px !important;
		background-color: #eeeeee !important;
	}

	.BIGdel {
		font-size: 17px !important;
	}

	.yuyinBOX {
		position: fixed;
		left: 50%;
		bottom: 31px;
		transform: translateX(-50%);
		height: 47px;
		background-image: linear-gradient(0deg,
				#ffd0bc 0%,
				#ffe5da 100%),
			linear-gradient(#ffd3c2,
				#ffd3c2);
		background-blend-mode: normal,
			normal;
		box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.38);
		border-radius: 23px;
		border: solid 2px #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 30px;

		image {
			width: 15px;
			height: 20px;
		}

		text {
			margin-left: 15px;
			font-size: 20px;
			font-weight: bold;
			white-space: nowrap;
			color: #ff3400;
		}
	}

	.page_box {
		background-color: #fff;
	}

	.search-history {
		padding: 30rpx;

		.title-box {
			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			.clear-history-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.content {
			width: 100%;

			.item {
				padding: 0 20rpx;
				line-height: 60rpx;
				background: #f5f6f8;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				max-width: 690rpx;
			}
		}
	}
</style>